<template>
  <div class="pages" ref="pages">
    <div v-for="(item, index) in arr" :key="index">
      <img
        class="div"
        :src="item.src"
        :style="{
          height: item.height + 'px',
          width: item.width + 'px',
          left: item.left + 'px',
          top: item.top + 'px',
        }"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [],
      containerWidth: 0,
      containerHeight: 0,
      images: [
        {
          src: "https://img2.baidu.com/it/u=1337068678,3064275007&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=750",
        },
        {
          src: "https://inews.gtimg.com/om_bt/Os3eJ8u3SgB3Kd-zrRRhgfR5hUvdwcVPKUTNO6O7sZfUwAA/641",
        },
        {
          src: "https://img2.baidu.com/it/u=1195773901,4039087122&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=750",
        },
        // 添加更多图片对象
      ],
    };
  },
  mounted() {
    const pagesElement = this.$refs.pages;
    if (pagesElement) {
      this.containerWidth = pagesElement.clientWidth;
      this.containerHeight = pagesElement.clientHeight;
      this.randomlyArrangeImages();
    }
  },
  methods: {
    randomlyArrangeImages() {
      const placedImages = [];
      while (this.images.length > 0) {
        const randomImageIndex = Math.floor(Math.random() * this.images.length);
        const image = this.images.splice(randomImageIndex, 1)[0];
        let width, height, left, top;
        let isPlaced = false;
        while (!isPlaced) {
          const scale = Math.random();
          width = Math.floor(this.containerWidth * scale);
          height = Math.floor(
            width * (image.naturalHeight / image.naturalWidth)
          );
          if (height > this.containerHeight) {
            height = this.containerHeight;
            width = Math.floor(
              height * (image.naturalWidth / image.naturalHeight)
            );
          }
          left = Math.floor(Math.random() * (this.containerWidth - width));
          top = Math.floor(Math.random() * (this.containerHeight - height));
          isPlaced = this.isSpaceAvailable(
            left,
            top,
            width,
            height,
            placedImages
          );
        }
        image.width = width;
        image.height = height;
        image.left = left;
        image.top = top;
        placedImages.push(image);
      }
      this.arr = placedImages;
    },
    isSpaceAvailable(left, top, width, height, placedImages) {
      for (const placedImage of placedImages) {
        const xOverlap = Math.max(
          0,
          Math.min(left + width, placedImage.left + placedImage.width) -
            Math.max(left, placedImage.left)
        );
        const yOverlap = Math.max(
          0,
          Math.min(top + height, placedImage.top + placedImage.height) -
            Math.max(top, placedImage.top)
        );
        if (xOverlap > 0 && yOverlap > 0) {
          return false;
        }
      }
      return true;
    },
  },
};
</script>

<style scoped>
.pages {
  width: 1440px;
  height: 500px;
  margin: 0 auto;
  position: relative;
}

.div {
  position: absolute;
  border: 10px solid #d0d0d0;
  object-fit: contain;
}
</style>
